<template>
  <div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="户主姓名" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="民族" prop="nation">
        <el-input v-model="ruleForm.nation"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="ruleForm.mobile"></el-input>
      </el-form-item>
      <el-form-item label="身份证号" prop="idCard">
        <el-input v-model="ruleForm.idCard"></el-input>
      </el-form-item>
      <el-form-item label="出生日期" prop="birthday">
        <el-date-picker
          v-model="ruleForm.birthday"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="选择日期时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="籍贯" prop="nativePlace">
        <el-input v-model="ruleForm.nativePlace"></el-input>
      </el-form-item>
      <el-form-item label="现住址" prop="address">
        <el-input v-model="ruleForm.address"></el-input>
      </el-form-item>
      <el-form-item label="所在小区" prop="community">
        <el-select v-model="ruleForm.community" placeholder="请选择">
          <el-option
            v-for="item in communityOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注信息" prop="remark">
        <el-input type="textarea" rows="3" v-model="ruleForm.remark"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >提交</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { storage } from "../../utils/storage";
import { utils } from "../../utils/common.js";
export default {
  data() {
    return {
      ruleForm: {
        name: "",
        nation: "",
        mobile: "",
        idCard: "",
        birthday: "",
        nativePlace: "",
        address: "",
        remark: "",
        community: ""
      },
      rules: {
        name: [{ required: true, message: "请输入用户姓名", trigger: "blur" }],
        nation: [{ required: true, message: "请输入民族", trigger: "blur" }],
        mobile: [
          { required: true, message: "请输入用户电话", trigger: "blur" }
        ],
        birthday: [
          {
            type: "date",
            required: true,
            message: "请选择出生日期",
            trigger: "change"
          }
        ],
        idCard: [
          { required: true, message: "请输入身份证号", trigger: "blur" }
        ],
        nativePlace: [
          { required: true, message: "请输入籍贯", trigger: "blur" }
        ],
        address: [{ required: true, message: "请输入现住址", trigger: "blur" }],
        community: [
          { required: true, message: "请选择所在社区", trigger: "change" }
        ],
        birthday: [
          { required: true, message: "请输入户主籍贯", trigger: "blur" }
        ]
      },
      houseList: storage.getStorage("house"),
      personList: storage.getStorage("person"),
      communityOptions: []
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          var housePushObj = JSON.parse(JSON.stringify(this.ruleForm));
          housePushObj["houseId"] =
            this.houseList[this.houseList.length - 1].houseId + 1;
          housePushObj["created"] = utils.formatDate(new Date().getTime());
          housePushObj["houseType"] = 0;
          this.houseList.push(housePushObj);
          storage.setStorage("house", this.houseList);
          this.ruleForm.userId =
            this.personList[this.personList.length - 1].userId + 1;
          this.ruleForm.pwd = "123456";
          this.ruleForm.sex = 0;
          this.ruleForm.relation = "户主";
          this.ruleForm.houseId = housePushObj["houseId"];
          this.ruleForm.created = housePushObj["created"];
          this.ruleForm.householder = this.ruleForm.name;
          this.ruleForm.moveIn = "";
          this.ruleForm.moveOut = "";
          this.ruleForm.personType = "0";
          this.personList.push(this.ruleForm);
          storage.setStorage("person", this.personList);
          setTimeout(() => {
            this.$message.success("户籍添加成功！");
            this.$router.replace("/household");
          }, 500);
        } else {
          return false;
        }
      });
    },
    getCommunityOptions() {
      var communityArr = storage.getStorage("community");
      communityArr.forEach((ele, index) => {
        var obj = {};
        obj["value"] = ele.id;
        obj["label"] = ele.name;
        this.communityOptions[index] = obj;
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  mounted() {
    this.getCommunityOptions();
  }
};
</script>

<style scoped>
.el-input {
  width: 200px;
}
.el-textarea {
  width: 400px;
}
</style>
